<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#c{
			border: 3px solid gold;
			border-radius: 4%;
			overflow: hidden;
		}
		</style>
		<script>
		 function shiftImg(){
			 var d=document.getElementById("p1");
			 alert(d.getAttribute("src"));
			 d.setAttribute("src","../day7/image/icon-2.jpg");
		 }
		 function addImg(){
			 let i= document.createElement("img");
			 i.setAttribute("src","../image/yuenan.jpg");
			 i.setAttribute("width","20%");
			 i.setAttribute("height","20%");
			 //i.height="20%";
			 //document.body.appendChild(i);
			 document.getElementById("c").appendChild(i);
		 }
		 function addImg2(){
			 let i= document.createElement("img");
			 i.setAttribute("src","../image/kongzi.jpg");
			 i.setAttribute("width","20%");
			 i.setAttribute("height","20%");
			 document.body.insertBefore(i,document.getElementById("c"));
			 
		 }
		 function kelong(){
			 var c2=document.getElementById("c").cloneNode(true);
			 document.body.appendChild(c2);
		 }
		 function delImg(){
			 var p1=document.getElementById("p1");
			 //document.removeChild(p1);
			 p1.parentNode.removeChild(p1);
		 }
		 function delImg2(){
		 	 var c=document.getElementById("c");
			 c.removeChild(c.children[0]);
		 }
		</script>
	</head>
	<body>
		<div id="c"><img id="p1" src="../day7/image/icon-1.jpg" alt="ximiannai"></div>
		<button type="button" onclick="shiftImg()">换图</button>
		<button type="button" onclick="addImg()">加一张图</button>
		<button type="button" onclick="addImg2()">加一张图到div前</button>
		<button type="button" onclick="kelong()">克隆div</button>
		
		<button type="button" onclick="delImg()">删除div中的id=p1图片</button>
		<button type="button" onclick="delImg2()">删除div中的第一张图片</button>
	</body>
</html>
